<script setup>
import {computed, reactive, ref, watch, watchEffect} from "vue";
/* todo
    基础指令 ： v-html v-text
    事件绑定 ： v-on
    循环指令 ： v-for
    绑定属性 ： v-bind  单项绑定： 数据 + 页面
    表单绑定 ： v-model 双向绑定： 数据 + 页面
 */



let name = '李飞跃';
/*let car = ref ( {
  brand: '小米' ,
  type: 'SU7-Ultra',
  price: 89999 ,
  color: '磨砂黑'
})*/
let car = reactive({
  brand: '小米' ,
  type: 'SU7-Ultra',
  price: 89_999 ,
  color: '磨砂黑' ,
  num : 10
})
function identification() {
  alert('欢迎尊贵的小米车主');
}
let msg = `<p style="color: #1a1a1a">备注 : 喜欢就好</p>`
let fruits = ['香蕉' , '苹果' , '梨子'];
//3. 绑定属性 不具备响应式特性
// let url = 'https://www.xiaomiev.com/';
let url = ref('https://www.xiaomiev.com/');
//响应式特性 ： 数据的变化可以更新到页面效果上
function changeUrl() {
  // url = 'https://www.mi.com/';
  // alert(url);
  console.log(url);
}
// 4. 响应式 ： ref()、reactive()
/*todo ref() :
     1. 把基本/对象数据使用ref() 包装成响应式数据
     2. 使用代理对象.value = ""
     3. 页面取值、属性绑定  直接{{url}}
   reactive() :
     1. 把对象类型使用reactive() 包装成响应式数据  不能放基本类型
     2. 使用代理对象.value = ""
     3. 页面取值、属性绑定  直接{{url}}
 */
function addPrice() {
  // car.value.price += 10_000;
  car.price += 10_000;
}
function depreciate() {
  // car.value.price -= 10_000;
  car.price -= 10_000;
}
function buyCar() {
  alert('购买成功');
}
const num = ref(1);
const totalPrice = computed(() => car.price * num.value);
// 监听 watch and watchEffect
// watch(num , (value , oldValue , onCleanup) => {
//   console.log("value" , value)
//   console.log("oldValue" , oldValue)
//   if (num.value > 3) {
//     alert('购买数量不能超过3个');
//     num.value = 3;
//   }
// })
//监听所有响应式数据变化
watchEffect(() => {
  if (num.value > 3) {
    alert('购买数量不能超过3个');
    num.value = 3;
  }
  if (car.price > 10_0000) {
    alert('价格过高余额不足');
    car.price = 10_0000;
  }
})
</script>

<template>
  <a v-bind:href="url" id="aaa" class="haha" style="color: #ff6480">查看车辆 , Go ! </a><br />
  <button @click="changeUrl">改变地址</button><br>
  <a :href="url" abc="url">查看车辆 , Go ! </a>
  <h2>姓名 : {{ name }}</h2>
  <h2>品牌 : {{ car.brand }}</h2>
  <h2>型号 : {{ car.type }}</h2>
  <h2>价格 : {{ car.price }}</h2>
  <h2>数量 : {{ num }}</h2>
  <button @click="addPrice">加价</button>
  <button @click="depreciate">降价</button><br />
  <button @click="num++">加量</button>
  <button @click="num--">减量</button>
  <button @click.once="buyCar">购买 {{ totalPrice }}</button>
  <h2>颜色 : {{ car.color }}</h2>

<!--  <h2>备注 : 喜欢就好</h2>-->
  <button @click.once="identification">车主认证</button>
  <div v-html="msg"></div>
  <span style="color: #1a1a1a" v-if="car.price < 100_0000">优惠价 : 78888</span>
  <span style="color: cadetblue" v-if="car.price >= 100_0000">原价 : 89999</span>
  <br />cd
  <li v-for="(f , i) in fruits">{{f}} ==> {{i}}</li>
</template>

<style scoped>

</style>